<template>
	<div>
		
		<div style="margin-top:20px;">
			<van-nav-bar
			    class="dhsz01"
			    title=""
			    left-text="返回"
			    left-arrow
			    @click-left="onClickLeft"
			    style="background:0px "
			    border=false
			/>
		</div>
		
		<van-row>
		  <van-col span="2"></van-col>
		  <van-col span="20">
			  <div style="margin-top: 100px;">
				  <h1>填写用户详情</h1>
				  
				  <van-form>
				    <van-cell-group inset>
				      <van-field
				        v-model="user.nickname"
				        label="昵称"
				        :rules="[{ required: true, message: '请填写你的昵称' }]"
				      />
				      <van-field
				        v-model="user.sex"
				        label="性别"
				        :rules="[{ required: true, message: '请填写你的性别' }]"
				      />
				  	<van-field
				  	  v-model="user.birthday"
				  	  label="生日"
				  	  :rules="[{ required: true, message: '请填写你的生日' }]"
				  	/>
				  	<van-field
				  	  v-model="user.sportdays"
				  	  label="运动天数"
				  	  :rules="[{ required: true, message: '请填写运动天数' }]"
				  	/>
				    </van-cell-group>
				    <div style="margin: 16px;">
				      <van-button round block type="primary" @click="writemydetail()">
				        提交
				      </van-button>
				    </div>
				  </van-form>
				  
			  </div>
		  </van-col>
		  <van-col span="2"></van-col>
		</van-row>
		
	</div>
</template>

<script>
	import { ref } from 'vue';
	
	export default {
	  setup() {
		  
	    },
	  data(){
		  
		  const onClickLeft = () => history.back();
		  
		  return {
		    user:{
				nickname:"",
				sex:"",
				birthday:"",
				sportdays:"",
			},
			onClickLeft,
		  }
		},methods:{
			writemydetail(){
		 		  var that=this;
		 		  this.axios.post("userdetail/update",this.user).then((res) => {
		 		    console.log(res)
		 			if(res.data.code==200){
						//更新令牌
						this.$store.commit("setToken",res.data.data);
		 				//吐司，短暂的弹出窗，默认3秒自动消失
		 				this.$toast.success('提交成功');
		 				//成功-跳转到我的界面
		 				this.$router.push("/");
		 			}else{
		 				this.$toast({
		 				  message: "亲，网络异常",
		 				  icon: 'close'
		 				});
		 			}
		 		  })
		 	  } 
		}      
	};
</script>

<style>
</style>
